<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar title="修改个人资料" @click-left="$router.push('/center')">
      <template #left>
        <span>返回</span>
      </template>
    </van-nav-bar>
    <!-- 个人资料表单项 -->
    <van-form @submit="onSubmit">
      <van-field v-model="nickname" name="nickname" label="用户昵称" placeholder="用户昵称" />
      <van-field v-model="age" name="age" label="年龄" placeholder="年龄" />
      <van-field
        readonly
        clickable
        name="area"
        :value="area"
        label="地区选择"
        placeholder="点击选择省市区"
        @click="showArea = true"
      />
      <van-popup v-model="showArea" position="bottom">
        <van-area :area-list="areaList" @confirm="onConfirm" @cancel="showArea = false" />
      </van-popup>
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit">修改用户资料</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { areaList } from '@vant/area-data'
export default {
  data() {
    return {
      nickname: this.$store.getters.nickname,
      age: 20,
      area: '',
      showArea: false,
      areaList,
    }
  },
  methods: {
    // 表单提交
    onSubmit() {
      // 获取用户信息
      // 进行网络请求
      // 请求返回后，进行用户提示
      // 在提示信息显示关闭后，进行跳由跳转
      this.$toast.success({
        message: '修改个人信息完成',
        duration: 2000,
        forbidClick: true,
        onClose: () => {
          // console.log(this.nickname, this.age, this.area)
          this.$router.replace('/center')
        },
      })
    },
    onConfirm(values) {
      this.area = values
        .filter((item) => !!item)
        .map((item) => item.name)
        .join('/')
      this.showArea = false
    },
  },
}
</script>

<style lang="scss" scoped>
</style>